<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Bootstrap 3, from LayoutIt!</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
	<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
	
	<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />

	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">	
	

	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="img/favicon.png">

    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

    <!-- BEGIN GRAFICAS -->
    <link class="include" rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="css/examples.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />


    <!-- Don't touch this! -->


    <script class="include" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
    <!-- End Don't touch this! -->

    <!-- Additional plugins go here -->
    <script class="include" type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
    <script class="include" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="plugins/jqplot.logAxisRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <!-- End additional plugins -->

    <!-- END GRAFICAS-->


    <!--BEGIN SCRIPTS/CSS GRAFICOS -->
    <!-- css's -->
    <link class="include" rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="css/examples.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />

    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="js/jquery.min.ie.js"></script>
    <!-- END SCRIPTS/CSS GRAFICOS -->
    <style>
    	/* Set the fixed height of the footer here */
    	#push,
    	#footer {
    		height: 60px;
    	}
    	#footer {
    		background-color: #eee;
    	}

    	/* Lastly, apply responsive CSS fixes as necessary */
    	@media (max-width: 767px) {
    		#footer {
    			margin-left: -20px;
    			margin-right: -20px;
    			padding-left: 20px;
    			padding-right: 20px;
    		}
    	}
    </style>
</head>

<body>
	<div class="container">	
		<div class="row clearfix">
			<div class="col-md-12 column">
				<nav class="navbar navbar-default navbar-static-top navbar-inverse" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
							<span class="sr-only"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button> <a class="navbar-brand" href="index.php">FritoLay</a>
					</div>
					
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active">
								<a href="TiempoReal.php">Tiempo Real</a>
							</li>
							<li>
								<a href="Historiador.php">Historiador</a>
							</li>
							<li>
								<a href="Reportes.php">Reportes</a>
							</li>						
						</ul>
					</div>
					
				</nav>
				<div class="page-header">
					<h1>
						Demo Reportes <small>Demo, Version 1.0</small>
					</h1>
				</div>
				<div class="tabbable" id="tabs-572768">
					<ul class="nav nav-tabs">
						<li class="active">
							<a href="#tab-linea1" data-toggle="tab">Linea 1</a>
						</li>
						<li>
							<a href="#tab-linea2" data-toggle="tab">Linea 2</a>
						</li>
						<li>
							<a href="#tab-linea3" data-toggle="tab">Linea 3</a>
						</li>
						<li>
							<a href="#tab-linea4" data-toggle="tab">Linea 4</a>
						</li>
						<li>
							<a href="#tab-linea5" data-toggle="tab">Linea 5</a>
						</li>
						<li>
							<a href="#tab-linea6" data-toggle="tab">Linea 6</a>
						</li>
						<li>
							<a href="#tab-linea7" data-toggle="tab">Linea 7</a>
						</li>
					</ul>
					<div class="tab-content">
						<!-- Begin TAB LINEA 1-->
						<div class="tab-pane active" id="tab-linea1">							
							<!-- BEGIN TABBED DE MAQUINAS EN LINEA 1-->
							<div class="tabbable" id="tabbedLinea1Maquina1">
								<ul class="nav nav-tabs">
									<li class="active">
										<a href="#tab-linea1-maquina1" data-toggle="tab">Maquina 1</a>
									</li>
									<li>
										<a href="#tab-linea1-maquina2" data-toggle="tab">Maquina 2</a>
									</li>
									<li>
										<a href="#tab-linea1-maquina3" data-toggle="tab">Maquina 3</a>
									</li>
									<li>
										<a href="#tab-linea1-maquina4" data-toggle="tab">Maquina 4</a>
									</li>
									<li>
										<a href="#tab-linea1-maquina5" data-toggle="tab">Maquina 5</a>
									</li>						
								</ul>
								<div class="tab-content">
									<!-- Begin TAB LINEA 1-->
									<div class="tab-pane active" id="tab-linea1-maquina1">							
							<!-- <p>
								Contenido Maquina 1
							</p> -->
							<!-- BEGIN CONTENIDO LINEA 1, MAQUINA 1 -->
							<div class="row clearfix">
								<div class="col-md-7 column">
									<div class="panel panel-primary">
										<div class="panel-heading">
											<h3 class="panel-title">
												Grafica
											</h3>
										</div>
										<div class="panel-body">
											<!-- La grafica va justo aca... -->
											<div class="container">
												<div id="chart1" style="padding-left: 5px; padding-right: 5px; width:550px; height:400px;"></div>
											</div>	
											<script class="code" type="text/javascript">$(document).ready(function(){
												$.jqplot.config.enablePlugins = true;
												var s1 = [2, 6, 7, 10];
												var ticks = ['a', 'b', 'c', 'd'];
												
												plot1 = $.jqplot('chart1', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
            	renderer:$.jqplot.BarRenderer,
            	pointLabels: { show: true }
            },
            axes: {
            	xaxis: {
            		renderer: $.jqplot.CategoryAxisRenderer,
            		ticks: ticks
            	}
            },
            highlighter: { show: false }
        });
												
												$('#chart1').bind('jqplotDataClick', 
													function (ev, seriesIndex, pointIndex, data) {
														$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
													}
													);
											});
										</script>
									</div>
									<div class="panel-footer">
										alguna metadata sobre la grafica (fecha, hora, descripcion, etc)
									</div>
								</div>
							</div>
							<div class="col-md-5 column">
								<div class="panel panel-primary">
									<div class="panel-heading">
										<h3 class="panel-title">
											Estadisticas
										</h3>
									</div>
									<div class="panel-body">											
										<table class="table table-striped">
											<thead>
												<tr>
													<th>
														Estadistica
													</th>
													<th>
														Valor
													</th>
												</tr>
											</thead>
											<tbody>
												<tr>								
													<td>
														Velocidad Promedio
													</td>
													<td>
														36
													</td>								
												</tr>
												<tr class="active">								
													<td>
														Unidades Producidas
													</td>
													<td>
														967
													</td>								
												</tr>
												<tr class="success">								
													<td>
														Unidades Desperdicio
													</td>
													<td>
														78
													</td>								
												</tr>
												<tr class="warning">								
													<td>
														Numero de Paros
													</td>
													<td>
														100
													</td>								
												</tr>
												<tr class="danger">								
													<td>
														Tiempo Muerto en Minutos
													</td>
													<td>
														300
													</td>								
												</tr>
												<tr>								
													<td>
														Tiempo Muerto en Segundos
													</td>
													<td>
														18000
													</td>								
												</tr>
											</tbody>
										</table>
									</div>
									<div class="panel-footer">
										Descripcion de las estadisticas
										<button class="pull-right btn btn-danger" style="position: relative; top: -5px;" onClick="window.print()">Print this page</button>
									</div>
								</div>
							</div>
						</div>
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">
									Detalle de datos
								</h3>
							</div>
							<div class="panel-body">
								Ver detalle de datos... &lt;a href="detalle.php?idDatos=#"&gt; &lt;/a&gt;
							</div>
							<div class="panel-footer">
								Descripcion de detalle de datos.
							</div>
						</div>
						<!-- END CONTENIDO LINEA 1, MAQUINA 1 -->
					</div>
					<!-- END TAB 1-->
					<div class="tab-pane" id="tab-linea1-maquina2">
						<p>
							Contenido Maquina 2
						</p>
					</div>
					<div class="tab-pane" id="tab-linea1-maquina3">
						<p>
							Contenido Maquina 3
						</p>
					</div>
					<div class="tab-pane" id="tab-linea1-maquina4">
						<p>
							Contenido Maquina 4
						</p>
					</div>
					<div class="tab-pane" id="tab-linea1-maquina5">
						<p>
							Contenido Maquina 5
						</p>
					</div>
				</div>
			</div>
			<!-- END TABBED DE MAQUINAS EN LINEA 1 -->
		</div>
		<!-- END TAB 1-->
		<div class="tab-pane" id="tab-linea2">
			<p>
				Linea 2
			</p>
		</div>
		<div class="tab-pane" id="tab-linea3">
			<p>
				Linea 3
			</p>
		</div>
		<div class="tab-pane" id="tab-linea4">
			<p>
				Linea 4
			</p>
		</div>
		<div class="tab-pane" id="tab-linea5">
			<p>
				Linea 5
			</p>
		</div>
		<div class="tab-pane" id="tab-linea6">
			<p>
				Linea 6
			</p>
		</div>
		<div class="tab-pane" id="tab-linea7">
			<p>
				Linea 7
			</p>
		</div>
	</div>
</div>			
</div>
</div>
</div>
<div id="footer">
	<div class="container">
		<p class="muted credit">
			Prototipo, Reporteria FritoLay 2013
		</p>
	</div>
</div>
<!-- Don't touch this! -->


<script class="include" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- Additional plugins go here -->

<script class="include" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>

<!-- End additional plugins -->

<script type="text/javascript" src="js/example.min.js"></script>
</body>
</html>